<template>
<div class="table">
    <div class="table-tools">
        <div class="table-tools-item">
            <el-button link @click="editTable" :disabled="selectRowIndex===0">
                <el-icon size="18" color="#337ecc">
                    <Edit/>
                </el-icon>
                <span style="font-size: 14px;">设计表</span>
            </el-button>
        </div>
        <div class="table-tools-item">
            <el-button link @click="addTable">
                <el-icon size="18" color="#b88230">
                    <CirclePlus/>
                </el-icon>
                <span style="font-size: 14px;">新建表</span>
            </el-button>
        </div>
        <div class="table-tools-item">
            <el-button link @click="deleteTable" :disabled="selectRowIndex===0">
                <el-icon size="18" color="#c45656">
                    <Remove/>
                </el-icon>
                <span style="font-size: 14px;">删除表</span>
            </el-button>
        </div>
        <div class="table-tools-item">
            <el-button link @click="openTable" :disabled="selectRowIndex===0">
                <el-icon size="18" color="#409EFF">
                    <FolderOpened/>
                </el-icon>
                <span style="font-size: 14px;">打开表</span>
            </el-button>
        </div>
        <div class="table-tools-item">
            <el-button link @click="showSearchInput" v-if="!searchInput">
                <el-icon size="18">
                    <Search/>
                </el-icon>
            </el-button>
            <el-input  v-model="searchContent" style="width: 240px"   size="small" prefix-icon="Search" clearable @change="searchTableName" @clear="clearSearch" v-else />
        </div>

    </div>
    <div class="table-rows">
        <el-table :data="tableList"  border size="small" height="calc(100vh - 150px)" @row-dblclick="dblTableClickRow" @row-click="tableClickRow">
            <el-table-column type="index" width="50" fixed >
                <template #default="scope">
                    <div style="width: 100%;display: flex;justify-content: flex-start;">
                        <div v-if="selectRowIndex===(scope.$index+1)"><el-icon size="18"><CaretRight /></el-icon></div>
                        <div>{{initIndex(scope.$index)}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="TABLE_NAME" fixed label="表名" min-width="180"/>
            <el-table-column prop="ENGINE" label="引擎" width="120"/>
            <el-table-column prop="AUTO_INCREMENT" label="自动递增值" min-width="80"/>
            <el-table-column prop="TABLE_COMMENT" label="注释" min-width="180"/>
            <el-table-column prop="DATA_LENGTH" label="数据长度" width="120">
                <template #default="scope">
                    <span>{{calculateLength(scope.row.DATA_LENGTH)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="TABLE_ROWS" label="行" width="80"/>
            <el-table-column prop="TABLE_COLLATION" label="编码格式" min-width="180"/>
            <el-table-column prop="CREATE_TIME" label="创建日期">
                <template #default="scope">
                    <span>{{formatDate(scope.row.CREATE_TIME)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="UPDATE_TIME" label="修改日期">
                <template #default="scope">
                    <span>{{formatDate(scope.row.UPDATE_TIME)}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>

</template>

<script setup name="MysqlTableView">
    import {calculateLength} from '@/utils/utils'
    import {formatDate} from '@/utils/dateUtils'
    const {proxy} = getCurrentInstance();
    const tableInfoData = reactive({
        loading:false,
        selectRowIndex:0,
        tableCount:0,
        selectRow:null,
        tableList: null,
        showSqlBox:false,
        connectionInfo:null,
        searchInput:false,
        searchContent:null,
    })
    const {loading,selectRowIndex,tableCount,tableList,selectRow,showSqlBox,connectionInfo,searchInput,searchContent}=toRefs(tableInfoData)

    function initData() {
        let query=proxy.$route.query
        if(connectionInfo.value==null){
            let connect=proxy.$appStore.connectList.find(row=>row.id===(query.connectId*1))
            connect.database=query.databaseName
            connectionInfo.value=connect
        }
        let params={}
        params.databaseKey=query.databaseName
        proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.selectTableList,connectionInfo.value,params).then(res=>{
          if(res.code===200){
            tableCount.value=res.data.dataList.length;
            tableList.value=res.data.dataList;
          }else {
            proxy.$modal.alertError(res.message);
          }
        })
    }


    function initIndex(index) {
        let rowIndex = index + 1
        if(tableCount.value===0){
            loading.value = false
        }else if(rowIndex===tableCount.value){
            loading.value = false
        }
        return rowIndex;
    }

    function tableClickRow(row,column,event){
        selectRowIndex.value=(tableList.value.indexOf(row)+1)
        selectRow.value=row
    }

    function dblTableClickRow(row,column,event) {
        let query=proxy.$route.query
        query.tableName=row.TABLE_NAME
        proxy.$router.push({name:'ShowMysqlTable',query:query})
    }

    function openTable(){
        let query=proxy.$route.query
        if(!selectRow.value){
            proxy.$modal.alertError("请选择一条记录");
            return
        }
        query.tableName=selectRow.value.TABLE_NAME
        proxy.$router.push({name:'ShowMysqlTable',query:query})
    }

    function addTable(){
        let query=proxy.$route.query
        proxy.$router.push({ name: 'DesignMysqlTable',query:query});
    }

    function editTable(){
        let query=proxy.$route.query
        if(!selectRow.value){
            proxy.$modal.alertError("请选择一条记录");
           return
        }
        query.tableName=selectRow.value.TABLE_NAME
        proxy.$router.push({ name: 'DesignMysqlTable',query:query});
    }

    function deleteTable(){
        if(!selectRow.value){
            proxy.$modal.msgError("请选择一条记录")
            return
        }
        proxy.$modal.confirm('是否确认删除当前表？删除后无法进行恢复！').then(function() {
            let params={}
            params.runScript="DROP TABLE `"+selectRow.value.TABLE_NAME+"`"
            return  proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.runConsole,connectionInfo.value,params);
        }).then(() => {
            initData()
            proxy.$modal.msgSuccess("删除成功")
        }).catch(() => {
        });
    }

    function showSearchInput(){
        searchInput.value=true
    }

   function searchTableName() {
       if(searchContent.value&&searchContent.value.trim().length>0){
           tableList.value=tableList.value.filter(row=>row.TABLE_NAME.includes(searchContent.value));
           tableCount.value=tableList.value.length
       }else {
           clearSearch()
           initData()
       }
   }

    function clearSearch() {
        searchInput.value=false;
        searchContent.value=null;
    }

    initData()
</script>

<style scoped>
    .table{
        user-select: text;
    }
    .table-tools{
        display: flex;
        justify-content: flex-start;
        height: 32px;
        line-height: 32px;
    }
</style>
